<script lang="ts" setup name="StaffDialog">
import { FormInstance, FormRules } from 'element-plus'
import { Dialog } from '~/src/api/interface'
import { StoreManagement } from '~/src/api/interface/storeManagement'
import { useHandleDialog } from '~/src/hooks/useHandleData'
import { genderType } from '~/src/utils/serviceDict'
const ruleFormRef = ref<FormInstance>()

const dialogProps = reactive<Dialog<StoreManagement.StaffInfo>>({
  title: '新增',
  data: {
    id: 0,
    departmentId: 0,
    mobile: '',
    name: '',
    sex: 1,
  },
  visible: false,
})
const { title, visible } = toRefs(dialogProps)

const phoneRules = (rules: any, value: any, callback: any) => {
  if (
    !/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(value.trim()) &&
    value
  ) {
    callback(new Error('请输入正确号码'))
  }
  callback()
}

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入员工姓名' }],
  departmentId: [{ required: true, message: '请选择部门' }],
  mobile: [
    {
      validator: phoneRules,
      message: '请输入正确的手机号码',
    },
  ],
})
watch(
  () => visible!.value,
  (value) => {
    if (!value) ruleFormRef.value?.resetFields()
  }
)
const acceptParams = (params: Dialog<StoreManagement.StaffInfo>) => {
  Object.assign(dialogProps, params)
  dialogProps.visible = true
}
const handleSubmit = async () => {
  await ruleFormRef.value!.validate()
  await useHandleDialog(dialogProps.api as (params: any) => Promise<any>, dialogProps.data, dialogProps.getTableList as () => void)
  dialogProps.visible = false
}

defineExpose({ acceptParams })
</script>

<template>
  <vab-dialog v-model:modelValue="visible" :title="title + '员工'" :width="600">
    <!--       :disabled="dialogProps.isView"
      :hide-required-asterisk="dialogProps.isView" -->
    <el-form ref="ruleFormRef" label-suffix=" :" label-width="100px" :model="dialogProps.data" :rules="rules">
      <el-form-item label="员工姓名" prop="name">
        <el-input v-model="dialogProps.data!.name" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="所属部门" prop="departmentId">
        <el-select v-model="dialogProps.data!.departmentId" class="w100">
          <el-option v-for="item in dialogProps.list" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="dialogProps.data!.mobile" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="dialogProps.data!.sex">
          <el-radio v-for="item in genderType" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-date-picker v-model="dialogProps.data!.birthday" class="w100" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="dialogProps.data!.nickName" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="业余爱好" prop="hobby">
        <el-input v-model="dialogProps.data!.hobby" clearable placeholder="请输入" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </vab-dialog>
</template>

<style lang="scss" scoped></style>
